<template>
  <div class="box">
    <div class="condition">
      <!-- <div>时间查询</div>
      <div class="block">
        <el-date-picker
          class="picker"
          v-model="Data"
          value-format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        >
        </el-date-picker>
      </div>
      <div>工作面</div>
      <div>
        <el-select v-model="Gzm" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>进尺类型</div>
      <div>
        <el-select v-model="Jclx" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div><el-button type="warning">查询</el-button></div> -->
      <div><el-button type="success" @click="add(null)">新增进尺</el-button></div>
     
    </div>
    <div class="Tbale">
      <el-table
        :data="tableData"
        :header-cell-style="{
          background: 'rgb(40,103,185)',
          color: 'white',
          borderColor: 'rgb(43,88,144)',
        }"
        :cell-style="{ 'text-align': 'center' }"
        height="750"
        style="width: 100%; padding: 0; height: 750px"
      >
        <el-table-column prop="FaceName" label="工作面名称" align="center" width="">
        </el-table-column>
        <el-table-column prop="RijinType" label="进尺类型" align="center" width="">
        </el-table-column>
        <el-table-column prop="StarTime" label="作业日期" align="center">
        </el-table-column>
        <el-table-column prop="DailyFootages" label="日进尺" align="center">
        </el-table-column>
        <el-table-column prop="CumulativeFootage" label="累计进尺" align="center">
        </el-table-column>
        <el-table-column prop="CreationTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="add(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delClick(scope.row.ID)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-edit ref="addedit" />
  </div>
</template>
  
  <script>
  import {jinchiliebiao,jinchidel} from '../../https/api/user'
  import AddEdit from "./AddEdit/add_and_xiu_JinDuChi.vue";
export default {
  components: {AddEdit },
  data() {
    return {
      Gzm: "",
      Jclx: "",
      Data: "",
      options1: [],
      options2: [],
      tableData: [],
    };
  },
  mounted() {
    this.Onlist()
    this.restaurants = this.loadAll();
  },
  methods: {
    Onlist() {
      jinchiliebiao().then((res) => {
        console.log("进尺列表", res);
        this.tableData = res;
      });
    },
    loadAll() {
      return this.tableData;
    },
    add(data) {
      console.log(data);
      // 打开对话框方法，接收表单数据，如果数据为null则新增否则为编辑
      // 点击新增和修改调用同一个方法，方法接收一个参数用来修改时回显数据
      // 新增时表单数据为空所以传null，，，，修改需要把需要修改的数据显示在表单上
      this.$refs.addedit.show(data);
    },
    delClick(x) {
      console.log("删除", x);
      const data = {
        id: x,
      };
      jinchidel(data).then((res) => {
        if (res) {
          alert("删除成功");
        }
        this.Onlist();
      });
    },
  },
};
</script>
  
<style  lang="less"scoped>
.box {
  width: 100%;
  padding: 0 20px;
  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    > div:nth-child(1) {
      color: white;
      font-size: 14px;
    }
    > div:nth-child(2) {
      margin-left: 7px;
    }
    > div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(4) {
      margin-left: 7px;
    }
    > div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(6) {
      margin-left: 7px;
    }
    > div:nth-child(7) {
      margin-left: 7px;
    }
    > div:nth-child(8) {
      margin-left: 7px;
    }
  }
  .Table {
    width: 100%;
    height: 750px;
  }
}


::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

// ::v-deep .el-form-item__label {
//   color: white !important;
// }

.picker {
  height: 40px;
  background-color: rgb(14, 26, 55);
  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}
</style>